<template>
  <div class="global_bg">
    <VantNavigationBar :title="tageName"></VantNavigationBar>
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <van-loading vertical>
        <template #icon>
          <van-icon name="star-o" size="30" />
        </template>
        加载中...
      </van-loading>
    </div>
    <!-- 商品列表 -->
    <div v-else>
      <van-card
        v-for="tage in tageList"
        :key="tage.product_id"
        :price="tage.product_price"
        :desc="tage.product_dsc"
        :title="tage.product_name"
        :thumb="'http://localhost:8090/' + tage.product_imge"
        @click="goinfo(tage.product_id)"
      />
      <!-- 没有商品时显示空状态 -->
      <div v-if="tageList.length === 0">
        <van-empty
          image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
          image-size="80"
          description="还没有商品"
        />
      </div>
    </div>
  </div>
</template>

<script>
import VantNavigationBar from '@/components/Navbar'
import { useRoute } from 'vue-router'
import { Card, Empty, Loading } from 'vant'
import home from '@/api/home.js'
import { useRouter } from 'vue-router'
import { ref } from 'vue'
export default {
  components: {
    VantNavigationBar,
    [Card.name]: Card,
    [Empty.name]: Empty,
    [Loading.name]: Loading,
  },
  setup() {
    const route = useRoute()
    const tageList = ref([])
    const router = useRouter()
    const tageName = route.params.tage_name
    const tageParms = {
      product_tage: route.params.product_tage,
    }
    const loading = ref(true) // 加载状态

    home.getProductTageInfo(tageParms).then((res) => {
      if (res.status === 200 && res.data) {
        tageList.value = res.data
        loading.value = false // 加载完成后隐藏加载状态
      }
    })

    //跳转页面
    const goinfo = (product_id) => {
      router.push({
        name: 'ProductInfo',
        params: { productId: product_id },
      })
    }
    return {
      tageList,
      tageName,
      loading,
      goinfo,
    }
  },
}
</script>

<style scoped>
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px; /* 设置加载状态容器的高度 */
}
</style>
